<template>
  <div class="flex-row" >
    <area-list @select-changed="selected" @bulid-files="bulidFiles" v-ref:list></area-list>
    <div style="flex: 1.5;" class="flex" id="user-files">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged :pager="!row && !newArea && !areainfo" @sort="sort">
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
            <div novalidate class="form-inline auto" partial>
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_userinfo_id"
                condition="f_userinfo_id='{}'" placeholder='用户编号'
                :size="model.f_userinfo_id ? model.f_userinfo_id.length : 4">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_user_name"
                condition="f_user_name like '%{}%'" placeholder='用户姓名'
                :size="model.f_user_name ? model.f_user_name.length * 2 : 4">
              </div>
              <div class="form-group">
                <input  type="text" class="form-control" v-model="model.f_user_phone" placeholder='电话'
                condition="f_user_phone = '{}'"
                :size="model.f_user_phone ? model.f_user_phone.length : 2">
              </div>
              <div class="form-group">
                <v-select
                  :value.sync="model.f_area"
                  v-model="model.f_area"
                  :options='$parent.$parent.areas'
                  placeholder='区/县'
                  condition="f_area like '%{}%'"
                  close-on-select>
                </v-select>
              </div>
              <div class="form-group">
                <v-select :value.sync="model.f_slice_area"
                  v-model="model.f_slice_area"
                  :options='$parent.$parent.sliceArea'
                  placeholder='片区/管理站'
                  condition="f_slice_area like '%{}%'"
                  close-on-select>
                </v-select>
              </div>
              <div class="form-group">
                <v-select :value.sync="model.f_adjustable_id" :options='$parent.$parent.adjustables' placeholder='调压箱' close-on-select
                  v-model='model.f_adjustable_id'   condition="f_adjustable_id = '{}'" :search='true'></v-select>
              </div>
              <!-- <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_area"
                condition="f_area like '%{}%'" placeholder='区域'
                :size="model.f_area ? model.f_area.length : 4">
              </div> -->
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_residential_area"
                condition="f_residential_area like '%{}%'" placeholder='小区'
                :size="model.f_residential_area ? model.f_residential_area.length * 2 : 4">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" v-model="model.f_address"
                condition="f_address like '%{}%'" placeholder='用户地址'
                :size="model.f_address ? model.f_address.length * 2 : 4">
              </div>
              <div class="form-group">
                <v-select :value.sync="model.f_user_state" v-model="model.f_user_state"
                    :options='$parent.$parent.userstates' placeholder='用户状态'
                    close-on-select condition="f_user_state='{}'"></v-select>
              </div>
              <!-- <div class="form-group">
                <v-select :value.sync="model.f_fire_state" v-model="model.f_fire_state"
                    :options='$parent.$parent.firestates' placeholder='点火状态'
                    close-on-select condition="f_fire_state='{}'"></v-select>
              </div> -->
              <!-- <div class="form-group">
                <v-select :value.sync="model.f_operator" v-model='model.f_operator'
                    :options='$parent.$parent.operatores' placeholder='操作员'
                    close-on-select
                    condition="f_operator = '{}'"></v-select>
              </div>
              <div class="form-group">
                <v-select :value.sync="model.f_outlets" v-model='model.f_outlets'
                    :options='$parent.$parent.outlets' placeholder='营业网点'
                    close-on-select
                    condition="f_outlets = '{}'"></v-select>
              </div> -->
              <div class="form-group">
                  <input type="text" class="form-control" v-model="model.f_contract_id"
                  condition="f_contract_id like '%{}%'" placeholder='合同编号'
                  :size="model.f_contract_id ? model.f_contract_id.length * 2 : 4">
              </div>
              <!-- <div class="form-group" v-if="$parent.$parent.isHead()">
                <v-select :value.sync="model.f_filiale" v-model='model.f_filiale'
                    :options='$parent.$parent.filiales' placeholder='分公司'
                    close-on-select
                    condition="f_filiale ='{}'"></v-select>
              </div> -->
              <div class="form-group" >
                <v-select :value.sync="model.f_filiale" v-model='model.f_filiale'
                :options='$parent.$parent.filiales' placeholder='分公司'
                close-on-select
                condition="f_filiale = '{}'"></v-select>
              </div>

              <div class="form-group">
                <v-select :value.sync="model.f_outlets" v-model='model.f_outlets'
                    :options='$parent.$parent.outletArr' placeholder='营业网点'
                    close-on-select
                    condition="f_outlets = '{}'"></v-select>
              </div>
              <div class="form-group">
                <button class="btn btn-success width-100" @click="search(), $parent.$parent.clean()">查询</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success width-100" @click="$parent.$parent.addNewArea()">新建小区</button>
              </div>
              <!-- <div class="form-group">
                <button class="btn btn-success width-150" @click="$parent.$parent.addAccept()">业务受理</button>
              </div> -->
              <div class="form-group">
                <button class="btn btn-success width-150" @click="$parent.$parent.addNoUser()">新建非民用</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success width-100" @click="$parent.$parent.fileUpload()">文件上传</button>
                <!-- <file-upload class="my-file-uploader" name="myFile"
                action="rs/file/upload" tagname="文件上传" :headers="$parent.$parent.headers"></file-upload> -->
              </div>
              <div class="form-group">
                <button class="btn btn-success width-100" v-if="$parent.$parent.rows && $parent.$parent.rows.length === 1 && $parent.$parent.rows[0].f_user_state === '正常'"
                @click="$parent.$parent.bulkOperations('批量销户', 'batch-cancellation')">销户</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success width-100"  v-if="$parent.$parent.rows && $parent.$parent.rows.length === 1 && $parent.$parent.rows[0].f_user_state === '销户'"
                @click="$parent.$parent.bulkOperations('批量启用', 'batch-enable')">启用</button>
              </div>
              <!-- <div class="form-group" v-if="model.f_userinfo_id && $parent.$parent.rows.length === 1">
                <dropdown>
                 <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle width-100">
                   批量操作
                 </button>
                 <ul slot="dropdown-menu" class="dropdown-menu">
                   <li>
                     <a href="#" v-if="$parent.$parent.rows[0].f_user_state === '正常'" ></span>批量销户</a>
                     <a href="#" v-if="$parent.$parent.rows[0].f_user_state === '销户'" @click="$parent.$parent.bulkOperations('批量启用', 'batch-enable')"></span>批量启用</a>
                   </li>
                 </ul>
               </dropdown>
              </div> -->
            </div>
          </criteria>
          <div id="1234567"  partial='list'>
            <data-grid :model="model" v-ref:grid >
              <template partial='head'>
              <tr>
                <th><nobr>序号</nobr></th>
                <th>
                    <data-order field="f_userinfo_id" name="用户编号" :order.sync="$parent.$parent.$parent.orderFields.f_userinfo_id"></data-order>
                </th>
                <th><nobr>用户信息</nobr></th>
                <th><nobr>地址信息</nobr></th>
                <th><nobr>状态</nobr></th>
                <th v-show= "$parent.$parent.$parent.jurisdiction.includes('档案修正权限')"><nobr>操作</nobr></th>
              </tr>
              </template>
              <template partial='body'>
                <td style="text-align: center;">{{$index + 1}}</td>
                <td>{{row.f_userinfo_id}}</td>
                <td>{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone ? row.f_user_phone : ''}}</td>
                <td>{{row.f_address_detail ? row.f_address + row.f_address_detail : row.f_address}}</td>
                <td style="text-align: center;">{{row.f_user_state}}</td>
                <td style="text-align: center;" v-show= "$parent.$parent.$parent.jurisdiction.includes('档案修正权限')">
                  <button type="button" name="button" class="btn btn-link" v-if="row.f_user_state === '正常'"
                  @click.stop="$parent.$parent.$parent.modifyUser(row)">修正</button>
                  <button type="button" name="button" v-if="row.f_user_state !== '正常' && row.f_user_state !== '销户'" class="btn btn-link"
                  @click.stop="$parent.$parent.$parent.buildFile(row)">建档</button>
                </td>
              </template>
            </data-grid>
          </div>

         </criteria-paged>
      </div>
      <div style="height: 500px;" v-show="row || newArea || areainfo || nonUser" class="select-overspread">
        <user-general-info   v-if="row || areainfo || nonUser"  :row="row" :modify="modify" @clean="clean" :areainfo="areainfo" :non-user="nonUser" @success="renew" @build-success="buildFileSuccess"></user-general-info>
        <new-area-info v-if="newArea" @clean="clean" @success="addArea" :row="arearow"></new-area-info>
      </div>
      <div style="height: 500px;" v-if="batcan || batenable">
        <batch-cancellation v-if="batcan" :useraccount="model.rows"  @clean="clean" @success="batchSuccess"></batch-cancellation>
        <batch-enable v-if="batenable" :useraccount="model.rows" @clean="clean" @success="batchSuccess"></batch-enable>
      </div>
      <!-- <div style="height: 500px;" v-if="showaccept">
        <business-accept v-if="showaccept" @clean="clean"></business-accept>
      </div> -->
    </div>
    <!-- <card-list :btns="operatebtn" :userinfoid="row ? row.f_userinfo_id : ''" v-ref:card :is-operate="false"></card-list> -->

    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">文件上传</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <file-upload class="my-file-uploader" name="myFile"
          action="rs/file/upload" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
        <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>

        <button v-show="show" type="button" class="btn btn-success" @click='confirm(filename)'>确认</button> -->
      </footer>
    </modal>
  </div>
</template>

<script>
import AppData from '../../stores/AppData'
import * as Util from '../Util'
import co from 'co'
import { PagedList, HttpResetClass } from 'vue-client'

export default {
  'title': '用户档案',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 50, {items: '"*"', tablename: '"t_userinfo"', orderitem: '"f_userinfo_id desc"'}),
      row: null, // 选择一条用户信息，对其进行修改
      arearow: null, // 新建修改小区使用的数据小区使用
      areainfo: null, // 小区批量建档使用的数据
      rows: [], // 用户档案选择一条时，将只显示一条信息，rows用来存放整页的数据
      newArea: false,
      nonUser: false,  // 非民用
      modify: false,
      batcan: false,
      batenable: false,
      show: false,
      showaccept: false,
      headers: {'username': Util.f.name, 'blodid': Util.guid()},
      contract: [{label: '全部', value: ' is null or f_contract_id is not null'}, {label: '有', value: ' is not null'},
      {label: '无', value: ' is null'}],
      orderDefault: 'f_createfile_date desc',
      orderFields: {
        f_userinfo_id: 'no'
      }
    }
  },
  ready () {
    this.search()
  },
  methods: {
    addAccept () {
      this.showaccept = true
      this.newArea = false
      this.batcan = false
      this.batenable = false
      this.nonUser = false
      this.modify = false
      this.row = null
      this.areainfo = null
    },

    search () {
      if (Util.f.parent.orgtype !== '总公司') {
        this.$refs.paged.$refs.criteria.model.f_filiale = [Util.f.f_fengongsi]
      }
      this.$refs.paged.$refs.criteria.search()
    },
    modifyUser (row) {
      this.row = row
      this.nonUser = (this.row.f_user_type === '非民用')
      this.modify = true
      this.newArea = false
      this.showaccept = false
      this.areainfo = null
      this.arearow = null
      this.$refs.paged.$refs.grid.model.rows = [row]
    },
    // 新建小区
    addNewArea () {
      this.clean()
      this.row = null
      this.areainfo = null
      this.arearow = null
      this.nonUser = false
      this.newArea = true
      this.modify = false
      this.showaccept = false
      this.$refs.paged.$refs.grid.model.rows = this.rows
    },
    addNoUser () {
      // this.clean()
      // console.log('建档。。', this)
      this.arearow = null
      this.areainfo = null
      this.newArea = false
      this.row = null
      this.showaccept = false
      // 将列表的数据清空
      this.modify = false
      this.model.rows = []
      this.nonUser = true
    },
    clean () {
      this.newArea = false
      this.batcan = false
      this.batenable = false
      this.nonUser = false
      this.modify = false
      this.row = null
      this.areainfo = null
      this.showaccept = false
      this.$refs.paged.$refs.grid.select(null)
      this.$refs.paged.$refs.grid.model.rows = this.rows
    },
    // success () {
    //   this.newArea = false
    //   this.row = null
    //   this.areainfo = null
    //   this.$refs.paged.$refs.grid.select(null)
    //   this.$refs.list.search({condition: '1=1'})
    // },
    renew (isNonUser) {
      this.nonUser = false
      this.modify = false
      this.newArea = false
      this.showaccept = false
      this.row = null
      this.areainfo = null
      this.$refs.paged.$refs.grid.select(null)
      this.model.loadPage(this.model.pageIndex)
    },
    // 新建小区成功，刷新小区列表
    addArea () {
      this.newArea = false
      this.row = null
      this.areainfo = null
      this.$refs.list.reflash()
    },
    buildFile (row) {
      // console.log('我是建档。。。', row)
      this.row = row
      this.modify = false
      this.nonUser = false
      this.newArea = false
      this.showaccept = false
    },
    // 查看修改小区
    selected (row) {
      // console.log('我是修改小区。。。', row)
      this.nonUser = false
      this.modify = false
      this.arearow = row.val
      this.areainfo = null
      this.newArea = true
      this.showaccept = false
      this.row = null
      this.$refs.paged.$refs.grid.model.rows = this.rows
    },
    // 小区批量建档
    bulidFiles (name, row) {
      this.arearow = null
      this.newArea = false
      this.nonUser = false
      this.modify = false
      this.showaccept = false
      this.row = null
      this.areainfo = row
      // 将列表的数据清空
      this.model.rows = []
    },
    // 小区批量建档成功
    buildFileSuccess (data) {
      this.model.rows.unshift(data)
    },
    selfSearch (args) {
      // 如果隶属总公司，不加任何判断
      if (!Util.f.parent.parent.name.includes('统一资源管理') && Util.f.parent.orgtype !== '总公司') {
        args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
      }
      this.model.search(args.condition, args.model)
    },
    bulkOperations (name, type) {
      if (name === '批量销户') {
        this.batcan = true
        this.batenable = false
        this.newArea = false
        this.showaccept = false
      } else if (name === '批量启用') {
        this.batenable = true
        this.batcan = false
        this.newArea = false
        this.showaccept = false
      }
    },
    batchSuccess () {
      this.batenable = false
      this.batcan = false
      this.showaccept = false
      this.search()
    },
    // 打开文件上传对话框
    fileUpload () {
      this.show = true
    },
    // 关闭文件上传对话框
    close () {
      // this.show = false
      if (this.show) {
        this.show = false
        // 讲选的文件清空
        this.$refs.file.$el.querySelector('input').value = ''
      }
    },
    // 判断当前登陆人是不是子公司的人员
    isHead () {
      return Util.f.parent.parent.name.includes('统一资源管理')
    },
    sort (field, rule) {
      // 将所有排序方式设为不排序，实现相互排斥
      for (let key in this.orderFields) {
        if (key === field) {
          this.orderFields[key] = rule
        } else {
          this.orderFields[key] = 'no'
        }
      }
      // 如果新规则不排序，还原为默认排序
      if (rule === 'no') {
        this.model.paramSource.orderitem = `'${this.orderDefault}'`
      } else {
        this.model.paramSource.orderitem = `'${field} ${rule}'`
      }

      this.search()
    }
  },
  computed: {
    userstates () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用户状态')]
    },
    inputtores () {
      return AppData.getParam('抄表员')
    },
    areas () {
      console.log('小区获取区县。。。。。', Util.f.f_allArea)
      let rs = []
      for (let i = 0; i < Util.f.f_allArea.length; i++) {
        let temp = {
          label: Util.f.f_allArea[i].label,
          value: Util.f.f_allArea[i].label
        }
        rs.push(temp)
      }
      return [{label: '全部', value: ''}, ...rs]
    },
    sliceArea () {
      let rs = []
      console.log('小区片区。。。', this.$refs.paged.$refs.criteria.model.f_area)
      if (this.$refs.paged.$refs.criteria.model.f_area.length > 0) {
        for (let i = 0; i < Util.f.f_allArea.length; i++) {
          if (Util.f.f_allArea[i].label === this.$refs.paged.$refs.criteria.model.f_area[0]) {
            rs = Util.f.f_allArea[i].value
          }
        }
      }
      console.log('获取小区片区。。。。', rs)
      return [{label: '全部', value: ''}, ...rs]
    },
    filiales () {
      let rs = []
      for (let i = 0; i < Util.f.f_allfiliale.length; i++) {
        rs.push({label: Util.f.f_allfiliale[i].label, value: Util.f.f_allfiliale[i].label})
      }
      return [{label: '全部', value: ''}, ...rs]
    },
    outletArr () {
      let rs = []
      console.log('档案营业网点。。。', this.$refs.paged.$refs.criteria.model.f_filiale)
      if (this.$refs.paged.$refs.criteria.model.f_filiale.length > 0) {
        for (let i = 0; i < Util.f.f_allfiliale.length; i++) {
          if (Util.f.f_allfiliale[i].label === this.$refs.paged.$refs.criteria.model.f_filiale[0]) {
            rs = Util.f.f_allfiliale[i].value
          }
        }
      }
      console.log('获取档案营业网点。。。。', rs)
      return [{label: '全部', value: ''}, ...rs]
    },
    operatores () {
      return [{label: '全部', value: ''}, ...AppData.getParam('操作员')]
    },
    firestates () {
      return [
        {label: '全部', value: ''},
        {label: '点火', value: '1'},
        {label: '未点火', value: '0'}
      ]
    },
    jurisdiction () {
      return Util.r
    },
    adjustables () {
      let arr = []
      if (Util.f.parent.orgtype === '总公司') {
        AppData.getAdjustable().forEach((item) => {
          let temp = {}
          temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
          temp.value = `${item.value.id}`
          arr.push(temp)
        })
      } else {
        AppData.getAdjustable().forEach((item) => {
          if (item.value) {
            if (item.value.f_filiale === Util.f.f_fengongsi) {
              let temp = {}
              temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
              temp.value = `${item.value.id}`
              arr.push(temp)
            }
          }
        })
      }
      return [{label: '全部', value: ''}, ...arr]
      // return AppData.getAdjustable()
    }
  },
  watch: {
    // 每次查询将查询到的数据存储起来，供选择操作后的替换
    'model.state' (val) {
      if (val === '正确') {
        this.rows = this.model.rows
      }
    }
  },
  events: {
    onFileUpload: function (file, res) {
      let data = {
        // configpath: 'hibernate/用户档案/userinfo.hbm.xml',
        tablename: 't_userinfo',
        filepath: res.path
      }
      this.$resetpost('rs/logic/import', data, {resolveMsg: null, rejectMsg: '上传失败'}).then((res) => {
        console.log('dddddddd', this)
        this.close()
        this.$showAlert(`一共上传${res.data.total}条数据, 成功${res.data.successnum}条`, 'success', 2000)
        this.search()
      })
    }
  }
}
</script>
